<script setup>
import { ref, computed } from 'vue'
import { getSongListPage } from '@/api/song-list'
import { addListSong } from '@/api/list-song'

const drawer = ref(false)
const songListPage = ref([])
// 分页参数
const queryParams = ref({
  pageNo: 1,
  size: 10,
  search: ''
})
const total = ref(0)
const songId = ref(0)

// 定一个供父组件调用的打开抽屉的方法
  const openDrawer = async (newSongId) => {
  drawer.value = true
  songId.value = newSongId
  // 异步请求获取数据
  const { data } = await getSongListPage(queryParams.value);
  songListPage.value = data.records;
  total.value = data.total;
}
const changeSongListPage = async () => {
  const { data } = await getSongListPage(queryParams.value)
  songListPage.value = data.records
  total.value = data.total
}
// 分页
const change = () => {
  queryParams.value.pageNo = currentPage.value
  queryParams.value.size = pageSize.value
  changeSongListPage()
}
//  暴露方法
defineExpose({
  openDrawer
})

const addListSongFun = async (songId, songListId) => {
  console.log({songId, songListId});
  const res = await addListSong({
    songId,
    songListId
  })
  console.log(res);
  ElMessage.success(res.msg)
  drawer.value = false
}

const currentPage = ref(queryParams.value.pageNo)
const pageSize = ref(queryParams.value.size)


</script>

<template>
  <el-drawer v-model="drawer" :title="title" direction="rtl" size="600">
    <div class="demo-drawer__content">
      <el-table :data="songListPage" style="width: 100%">
        <el-table-column prop="title" label="歌单标题" />
        <el-table-column prop="style" label="风格" width="120" />
        <el-table-column label="操作"  width="80">
          <template #default="{ row }">
            <el-button type="primary" @click="addListSongFun(songId ,row.id)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="change"
        @size-change="change"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </el-drawer>
</template>

<style scoped>

</style>